<template>
    <header>
        <div class="search-return" @click="$router.go(-1)">
            <
        </div>
        <div class="search-main">
            <form action="" >
                <input type="search" placeholder="学院风jk套装" v-model="searchVal">
            </form>
        </div>
        <div class="search-btn" @click="goSearchList">
            搜索
        </div>
    </header>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref } from 'vue'
// 输入框信息

const router = useRouter()
const route = useRoute()

let searchVal = ref(route.query.key || '')
const goSearchList = () => {
    // console.log(searchVal.value)
    // 将数据保存到localStorage
    if(!searchVal.value) return  // 判断是否有数据
    let searchList = localStorage.getItem('searchList') || '[]' // 获取本地数据 如果没有就是空数组 []
    // console.log(searchList)
    let searchArr = JSON.parse(searchList) // 将字符串转换为数组
    searchArr.unshift(searchVal.value) // 将数据添加到数组中
    console.log(searchArr)
    searchArr = [...new Set(searchArr)] // 去重
    localStorage.setItem('searchList', JSON.stringify(searchArr)) // 将新数组保存到本地
    // 路由跳转 到搜索页
    router.push({name: 'list', query: {key: searchVal.value}})
}
</script>
<style scoped>
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.2rem;
    padding: 0.2rem 0.1rem;
    background-color: #fff;
    border-bottom:  1px solid #ccc;
    box-sizing:border-box;
}
.search-return{
    padding: 0 0.2rem;
    color: #666;
}
.search-btn{
    width: 1.1rem;
    padding: 0 0.2rem;
    color: #666;
    font-size: 0.4rem;
}
.search-main{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    height: 1rem;
}
.search-main form{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.search-main form input{
    width: 90%;
    height: 95%;
    font-size: 0.4rem;
    color: #999;
    background-color: #eee;
    text-align: center;
    border: 1px solid #ccc;
    transition: border-color .3s ease;
    border-radius: 0.15rem;
}
</style>